<template>
	<view style="padding: 10px;background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0),#dbe3f4);height: 100vh;">
		<view class="avatar-container">
			<u-image src="/static/avatar/touxiang1.jpg" width="150px" height="150px" shape="circle"></u-image>
			<view style="margin-left: 20px; font-size: 30px; padding: 20xp;">
				张敬轩
			</view>
		</view>
		<u-divider></u-divider>
		<view class="info">
			<u-row justify="space-between"
            gutter="5">
				<u-col :span="4">
					<view style="color: gray;">
						性别
					</view>
					<view style="width: 40px; margin-top: 5px; margin-left: 10px;">
						<u-tag text="男"></u-tag>
					</view>
				</u-col>
				<u-col :span="4">
					<view style="color: gray;">
						年龄
					</view>
					<view style=" margin-top: 5px; margin-left: 10px;">
						18
					</view>
				</u-col>
			</u-row>
			<u-divider></u-divider>
			<u-row>
				<view style="color: gray;">
					描述
				</view>
			</u-row>
			<u-row>
				<view style=" margin-top: 5px; margin-left: 10px; font-size: 20px;">
					23123123131313131
				</view>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad(option) {
		  console.log(option.id); // 输出 value1
		},
		methods: {
			
		}
	}
</script>

<style>

.avatar-container{
	height: 150px;
	background-color: white;
	border-radius: 10%;
	display: flex;
	align-items: center;
}

.info{
	height: 400px;
	background-color: white;
	border-radius: 10%;
	padding: 20px;
}
</style>
